<template>
	<view>
		<uni-search-bar @confirm="search_movie" placeholder="请输入电影名"></uni-search-bar>
		<view style="text-align: center;color: #DD524D;"><text>正在热映</text></view>
		<view>
			 <swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="4000" duration="500">
				<swiper-item v-for="(hotMovie,index) in movieInfo" :key="index">
					<view><image :src="getImages(hotMovie.images.large)" mode="" class="hotMovieImg" :data-doubanId="hotMovie.id" @click="gotoDetailPage"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view style="display: flex;flex-direction: row;">
			<uni-tag text="全部" size="small" :circle="true" :type="primary[0]" class="tagBtn" @click="tagBtn('全部',0)"></uni-tag>
			<uni-tag text="喜剧" size="small" :circle="true" :type="primary[1]" class="tagBtn" @click="tagBtn('喜剧',1)"></uni-tag>
			<uni-tag text="动作" size="small" :circle="true" :type="primary[2]" class="tagBtn" @click="tagBtn('动作',2)"></uni-tag>
			<uni-tag text="爱情" size="small" :circle="true" :type="primary[3]" class="tagBtn" @click="tagBtn('爱情',3)"></uni-tag>
			<uni-tag text="剧情" size="small" :circle="true" :type="primary[4]" class="tagBtn" @click="tagBtn('剧情',4)"></uni-tag>
		</view>
		<view style="display: flex;flex-direction: row;width: 100%;flex-wrap: wrap;">
			<view v-for="(item,index) in movieAllInfo" :key="index" style="width: 24%;background-color: #C0C0C0;border: 1upx #007AFF solid;">
				<view>
					<image :src="getImages(item.images.small)" mode="" class="movieTyoeImage" :data-doubanId="item.id" @click="gotoDetailPage"></image>
				</view>
				<view style="text-align: center;">
					<text style="font-size: 5upx;">{{item.title}}</text>
				</view>
			</view>
		</view>
		<view style="display: flex;justify-content: center;">
			<uni-pagination title="电影分页" show-icon="true" :total="maxPage" current="1" @change="pagingBtn" pageSize="8"></uni-pagination>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	export default {
		data() {
			return {
				movieInfo:[],
				primary:["primary","default","default","default","default"],
				movieType:"全部",
				movieAllInfo:[],
				movieInfoByType:[],
				maxPage:0
			}
		},
		onLoad() {
			//获取在排片表中尚未放映的今日电影信息
			uni.request({
			    url: '/api/tato/getHotMovieInfo', 
			    success: (res) => {
					//console.log(res.data)
					for(let i = 0;i<res.data.length;i++){
						this.movieInfo.push(JSON.parse(res.data[i]))
					}
			    }
			});
			//这个请求是拿到所有在数据库中存在的电影信息
			uni.request({
				 url: '/api/tato/getAllMovieInfoInDatabase', 
				 success:(res) =>{
					 //console.log(res.data)
					for(let i = 0;i<res.data.length;i++){
						this.movieInfoByType.push(JSON.parse(res.data[i]))
					}
					this.maxPage = this.movieInfoByType.length
					for(let i = 0;i < 8;i++){
						if(this.movieInfoByType[i]==undefined){
							break;
						}else{
							this.movieAllInfo.push(this.movieInfoByType[i])
						}
					}
				 }
			})
		},
		methods: {
			//这是查询用户输入的电影名,跳转到查询电影名的页面
			search_movie(movieName){
				if(movieName.value.length>0){
					uni.navigateTo({
						url:"../search_movie_page/search_movie_page?name="+movieName.value
					})
				}
			},
			getImages(_url){
			    if( _url !== undefined ){
			        let _u = _url.substring( 7 );
			        return 'https://images.weserv.nl/?url=' + _u;
			    }
			},
			tagBtn(e,idx){
				let tempArray = ["default","default","default","default","default"];
				tempArray[idx] = "primary";
				this.primary=tempArray;
				this.movieType=e;
				let tempArray2 = [];
				if(e=="全部"){
					for(let i = 0;i < 8;i++){
						if(this.movieInfoByType[i]==undefined){
							break;
						}else{
							tempArray2.push(this.movieInfoByType[i])
						}
					}
					this.movieAllInfo=tempArray2
					this.maxPage=this.movieInfoByType.length
				}else{
					for(let i = 0;i<this.movieInfoByType.length;i++){
						let movieGenres = this.movieInfoByType[i].genres
						for(let j=0;j<movieGenres.length;j++){
							if(movieGenres[j]==e){
								tempArray2.push(this.movieInfoByType[i])
							}
						}
					}
					this.maxPage=tempArray2.length
					this.movieAllInfo=tempArray2
				}
			},
			pagingBtn(e){
				let startPage = (e.current-1)*8;
				let tempArray = [];
				for(let i = startPage;i < startPage+8;i++){
					if(this.movieInfoByType[i]==undefined){
						break;
					}else{
						tempArray.push(this.movieInfoByType[i])
					}
				}
				this.movieAllInfo=tempArray
			},
			gotoDetailPage(e){
				let doubanId = e.currentTarget.dataset.doubanid
				//将豆瓣id传入到详情页中
				uni.navigateTo({
					url:"../movie_detail_page/movie_detail_page?doubanId="+doubanId
				})
			}
		},
		components:{
			uniSearchBar,uniTag,uniPagination
		}
	}
</script>

<style>
.hotMovieImg{
	width: 100%;
}
.swiper{
	height: 500upx;
}
.tagBtn{
	width: 70upx;
}
.movieTyoeImage{
	width: 100%;
	height: 200upx;
}
</style>
